<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="v-scroll">
        <div class="contant">
          <img src="./img/1.jpg" alt="" class="m-img" />
          <img src="./img/2.jpg" alt="" class="m-img" />
          <img src="./img/4.jpg" alt="" class="m-img" />
          <img src="./img/5.jpg" alt="" class="m-img" />
          <img src="./img/6.jpg" alt="" class="m-img" />
          <img src="./img/7.jpg" alt="" class="m-img" />
        </div>
      </div>
    </div>
  </body>
  <style>
    body,
    html {
      height: 100%;
      width: 100%;
    }
    body {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 0;
      background-color: rgba(224, 224, 224, 0.5);
    }
    .container {
      width: 100%;
      height: 70%;
    }
    .v-scroll {
      position: relative;
      overflow: auto;
      transform-origin: 0 0;
      transform: rotate(-90deg);
    }
    .v-scroll::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .contant {
      width: auto;
      position: absolute;
      display: flex;
      /* white-space: nowrap; */
      left: 100%;
      transform-origin: 0 0;
      transform: rotate(90deg);
    }
    .contant::before {
      content: "";
      clear: both;
    }
    .m-img {
      flex: 1;
      margin-left: 20px;
      height: 100%;
    }
  </style>
  <script>
    const getInfo = () => {
      let container = document.getElementsByClassName("container")[0];
      let vscroll = document.getElementsByClassName("v-scroll")[0];
      let contant = document.getElementsByClassName("contant")[0];
      cw = container.offsetWidth;
      ch = container.offsetHeight;
      vscroll.style.width = ch + "px";
      vscroll.style.height = cw + "px";
      contant.style.height = ch + "px";
      vscroll.style.transform = `translateY(${ch + "px"}) rotate(-90deg)`;
      console.log(cw, ch);
    };
    getInfo();
    const debounce = (fn, delay) => {
      let timer;
      return function () {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          fn();
        }, delay);
      };
    };
    const getChangeFun = debounce(getInfo, 32);
    window.addEventListener("resize", getChangeFun);
  </script>
</html>
